<template>
	<view class="page content-20 page-bg">
		<view class="empty" v-if="items.length <= 0">
			<u-empty mode='list' text='您的爱宠还没有病历噢~'></u-empty>
		</view>
		<view class="item" v-else v-for="item in items" :key='item.id' style="margin-bottom: 20upx;">
			<view class="item-box">
				<image  class="avatar item-img" :src="item.avatar" mode=""></image>
				<view class="item-info">
					<view class="title item-title">{{item.nickName}}({{item.varietiesView}})</view>
					<view class="item-desc">{{item.petColor}} | {{item.weight}}kg | {{common.petsSex[item.petSex]}}</view>
				</view>
			</view>
			<view class="limit">
				<view class="limit-com link" @click="$link('/pagesMine/petsRecordsDetail?id='+item.id)">
					<view class="title theme">查看病历</view>
					<u-icon name='arrow-right' size='20' color='#0bbf68'></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
				return {
					pageIndex: 1,
					pageSize: 10,
					totalCount: 0,
					items: [],
					common
				}
		},
		
		onLoad() {
			this.pageSize = common.pageSize
			this.getItems()
		},
		
		methods: {
			getItems() {
				api.getPetList({ },(res) => {
					 this.items = res
				}) 
			},
		}
	}
</script>

<style scoped lang="scss">
	.empty{
		margin-top: 100px;
	}
	.item-desc{
		font-size: $font-size-26;
		color: #666666;
		line-height: 26upx;
		margin-top: 10upx;
	}
	.limit{
		margin-top: 30upx;
		padding-top: 30upx;
		border-top: 1px solid $border-color;
		@include flex-base;
		justify-content: center;
	}
	.limit-com{
		font-size: $font-size-26;
		color: #666666;
	}
	.theme{
		color: $theme-color;
		font-weight: bold;
	}
	
	
</style>
